import React, {useState} from 'react'
import {Drawer, Image} from "antd";
import Checkout from "@/pages/Home/component/Cart/component/Checkout";
import {connect} from "umi";
import {NoProduct} from "@/pages/Home/component/Cart/component/NoProduct";
import ShippingCartList from "@/pages/Home/component/Cart/component/ShippingCartList";
import './index.less'

const Cart = (props: any) => {
  const {products: {shippingCartList,shippingCartNum}} = props

  const [open, setOpen] = useState(false)


  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }
  return (
    <>
      <div
        className="chart-shop-logo w-[50px] h-[50px] fixed top-0 right-0 cursor-pointer"
        onClick={showDrawer}
      >
      </div>
      <div className="cart-number-outside text-center w-[18px] h-[18px] flex-shrink-0 rounded-[9px] bg-[#EABF00]">
        {shippingCartNum}
      </div>
      <Drawer
        className="ant-drawer-close ant-drawer-header"
        placement="right"
        closeIcon={false}
        open={open}
        headerStyle={{border: "none",height: "0"}}
      >
        <div
          className="close-drawer"
          onClick={onClose}
        >
          <Image
            src={require('@/assets/img/closesquare@1x.png')}
            preview={false}
          />
        </div>
        <div className="ant-drawer-body">
          {
            shippingCartList.length ?
              <ShippingCartList shippingCartList={shippingCartList} shippingCartNum={shippingCartNum}/>
              : <NoProduct/>
          }

          <Checkout/>
        </div>
      </Drawer>
    </>
  )
}
export default connect(({products}: any)=> ({products}))(Cart) ;
